<template>
    <div class="dashboard-container">
        <div class="dashboard-editor-container">
            <!-- <github-corner class="github-corner" />
            <panel-group @handleSetLineChartData="handleSetLineChartData" />-->
            <el-row
                style="position:relative;background:#fff;padding:16px 16px 0;margin-bottom:32px;height:calc(100vh - 180px);"
            >
                <!-- <h1 class="home-title">欢迎使用光晖云平台</h1>
                <img src="@/assets/images/home_bg.png">-->
                <div class="homecard-box">
                    <div class="welcome-box">
                        <div class="welcome">WELCOME</div>
                        <div class="welcome-ch">欢迎使用光晖云平台 v1.0</div>
                    </div>
                    <div class="home-logo">
                        <img src="../assets/images/home-logo.png" alt />
                    </div>
                    <el-divider class="home-line"></el-divider>
                    <div class="now-user">当前您登录的账号为：</div>
                    <div class="copmany-people">
                        <template>
                            <strong v-if="userInfo.dept != null">{{userInfo.dept.name}}</strong>
                            <strong v-else> -- </strong>
                        </template>
                        <span>></span>
                        <template>
                            <strong v-if="userInfo.username != null">{{userInfo.username}}</strong>
                            <strong v-else> -- </strong>
                        </template>
                    </div>
                    <!-- <div class="last-login-time">您最后登录账号的时间为：</div>
                    <div class="last-detail-time">[ 2020年07月02日 15:24 ]</div>
                    <div class="show-texts">PS：如果您以上时间未曾登录此平台系统，或者对此有任何疑问，请联系我们（底部二维码或电话）</div> -->
                    <div class="show-texts">PS：如果您在使用系统过程中，有任何疑问，请联系我们（底部二维码或电话），将不遗余力为您提供服务！</div>
                    <el-divider class="home-line"></el-divider>
                    <div class="bottom-box">
                        <div class="two-code-images">
                            <div class="code-picture-box">
                                <img src="../assets/images/code-author.png" alt />
                                <div>光晖互联管理员</div>
                            </div>
                            <div class="code-line"></div>
                            <div class="code-picture-box">
                                <img src="../assets/images/code-business.png" alt />
                                <div>商务合作</div>
                            </div>
                        </div>
                        <el-divider class="home-line"></el-divider>
                        <div class="phone-num">
                            联系电话：
                            <span>150 3417 8881</span>
                        </div>
                    </div>
                </div>
            </el-row>
            <!-- <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <radar-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <pie-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <bar-chart />
          </div>
        </el-col>
            </el-row>-->
            <!-- <el-dialog :visible.sync="dialogFormVisible1" width="800px">
        <el-row style="height: 500px; overflow: auto">
          <span v-html="content"></span>
        </el-row>
            </el-dialog>-->
        </div>
    </div>
</template>

<script>
import GithubCorner from "@/components/GithubCorner";
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RadarChart from "@/components/Echarts/RadarChart";
import PieChart from "@/components/Echarts/PieChart";
import BarChart from "@/components/Echarts/BarChart";

import { apiGetSystemAnnouncement } from "@/api/system/announcement";

const lineChartData = {
    newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130]
    }
};

export default {
    name: "Dashboard",
    components: {
        GithubCorner,
        PanelGroup,
        LineChart,
        RadarChart,
        PieChart,
        BarChart
    },
    data() {
        return {
            userInfo: null,
            lineChartData: lineChartData.newVisitis,
            tableData: [],
            dialogFormVisible1: false,
            title: "",
            content: ""
        };
    },
    created() {
        this.userInfo = this.$store.state.user.user
        this.getAnnouncement();
    },
    methods: {
        handleSetLineChartData(type) {
            this.lineChartData = lineChartData[type];
        },
        getAnnouncement() {
            var paramObj = {
                page: this.pageIndex,
                size: 18
            };
            apiGetSystemAnnouncement(paramObj).then(res => {
                this.tableData = res.content;
                this.tableTotal = res.totalElements;
                console.log(this.tableData);
            });
        },
        handleClick(row) {
            this.dialogFormVisible1 = true;
            this.title = row.title;
            this.content = row.content;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
    font-family: PingFang SC;
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
        position: absolute;
        top: 0;
        border: 0;
        right: 0;
    }

    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
}

@media (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
}
.home-title {
    position: absolute;
    top: 60%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.homecard-box {
    padding: 50px 0 30px 30px;
}
.welcome-box {
    font-size: 18px;
    display: flex;
}
.welcome {
    color: #333;
    margin-right: 10px;
}
.welcome-ch {
    color: #999;
}
.home-logo {
    margin-top: 10px;
    width: 245px;
    height: 60px;
}
.home-logo img {
    width: 100%;
    height: 100%;
}
.home-line {
    width: 95%;
}
.now-user {
    margin-top: 34px;
    color: #999999;
    font-size: 14px;
}
.copmany-people {
    margin-top: 6px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
}
.copmany-people span {
    color: #ccc;
    font-size: 14px;
}
.last-login-time {
    color: #999;
    font-size: 14px;
    margin-top: 22px;
}
.last-detail-time {
    color: #333;
    font-size: 14px;
    font-weight: bold;
    margin-top: 6px;
}
.show-texts {
    margin-top: 12px;
    font-size: 12px;
    color: #ccc;
    margin-bottom: 40px;
}
.bottom-box{
  width: 100%;
  position: absolute;
  bottom: 20px;
}
.two-code-images {
    display: flex;
    align-items: center;
}
.code-picture-box {
    font-size: 12px;
    color: #333;
    font-weight: bold;
    text-align: center;
}
.code-picture-box img {
    width: 114px;
    height: 114px;
}
.code-line {
    width: 1px;
    height: 50px;
    background: #ccc;
    margin: 0 32px;
}
.phone-num {
    font-size: 14px;
    color: #ccc;
}
.phone-num span {
    font-weight: bold;
    color: #333;
}
</style>
